<template>
  <div class="page-container">
    <header-nav/>
    <media :query="{maxWidth: 768}">
      <div class="m-box">
        <div class="m-box-top">
          <van-swipe class="m-box-top-rahmen" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
              <img :src="swiperImgUrl">
            </van-swipe-item>
          </van-swipe>
          <div class="m-box-top-grids">
            <div
              class="grids-column"
              v-for="item in gridLists"
              :key="item.ID"
              @click="navigateToGrid(item)"
            >
              <span
                class="grids-icon"
                :class="item.ImgUri"
                :style="{color: swiperIconColor || '#4d4d4d'}"
              ></span>
              <span
                :style="{fontSize: swiperIconFontSize || '2.933vw', color: swiperIconColor || '#7c7c7c'}"
              >{{item.Description}}</span>
              <span class="grids-bord"></span>
            </div>
          </div>
        </div>
        <div class="m-box-main">
          <p class="m-box-main-title">最新资讯</p>
          <div
            class="m-box-main-card"
            v-for="item in informationLists"
            :key="item.ID"
            @click="navigateToPage(item.ID)"
          >
            <div class="card-rahmen">
              <img :src="item.ThemeImage">
            </div>
            <div class="card-info">
              <p class="info-theme">{{item.Theme}}</p>
              <p class="info-date">
                <van-icon name="clock"></van-icon>
                <span class="date-clock">{{item.ModifyDate}}</span>
              </p>
            </div>
          </div>
        </div>
        <van-tabbar v-model="tabbarIndex">
          <van-tabbar-item icon="home">首页</van-tabbar-item>
          <van-tabbar-item icon="contact" to="micro/mine">我的</van-tabbar-item>
        </van-tabbar>
      </div>
    </media>
    <media :query="{minWidth: 768}">
      <footer-nav/>
    </media>
  </div>
</template>

<script>
import $ from 'jquery';
import Moment from 'moment';
import Media from 'vue-media';
import Header from '../components/header';
import Footer from '../components/footer';
export default {
  name: 'MinHomePage',
  data() {
    return {
      ST: null,
      swiperImgUrl: null,
      swiperIconColor: null,
      swiperIconFontSize: null,
      gridLists: [],
      informationLists: [],
      tabbarIndex: 0,
      shareUrl: ''
    };
  },
  components: {
    'header-nav': Header,
    'footer-nav': Footer,
    Media
  },
  created() {
    if (this.$route.query.st) {
      this.$store.commit('SET_ST', this.$route.query.st);
      localStorage.setItem('st', this.$route.query.st);
    }
    if (this.$route.query.PromotionCode) {
      this.$store.commit('SET_PROMOTIONCODE', this.$route.query.PromotionCode);
      this.shareUrl = `${window.location.href.split('#')[0]}#/micro?st=${this.$route.query.st}?PromotionCode=${this.$route.query.PromotionCode}`;
    } else {
      this.shareUrl = `${window.location.href.split('#')[0]}#/micro?st=${this.$route.query.st}`;
    }
    this.ST = this.$route.query.st || this.$store.state.UserInfo.ST;
    $.ajax({
      type: 'GET',
      url:
        this.baseUrl +
        '/api/MiniHomepage/GetActivitieHomePageConfig?st=' +
        this.ST,
      success: res => {
        console.log('getActivitieHomePageConfig', res);
        this.swiperImgUrl = res.Data.LoopImg.PhoneImgUri;
        this.swiperIconColor = res.Data.LoopImg.IndexIconColor;
        this.swiperIconFontSize = res.Data.LoopImg.IndexIconFontSize;
      }
    });
    $.ajax({
      type: 'GET',
      url: this.baseUrl + '/api/MiniHomepage/GetIconsBySt?st=' + this.ST,
      success: res => {
        console.log('GetIconsBySt', res);
        this.gridLists = res.Data;
      }
    });
    $.ajax({
      type: 'GET',
      url: this.baseUrl + '/api/consult/getAllConsults/' + this.ST,
      success: res => {
        console.log('getAllConsults', res);
        res.forEach(
          item =>
            (item.ModifyDate = Moment(item.ModifyDate).format(
              'YYYY-MM-DD HH:mm:ss'
            ))
        );
        this.informationLists = res;
      }
    });
    $.ajax({
      type: 'POST',
      url: this.baseUrl + '/api/Activity/GetWeixinShare',
      data: {
        ST: this.ST,
        UserType:
          this.$route.query.userType || this.$store.state.UserInfo.UserTypeEnum,
        URL: window.location.href.split('#')[0]
      },
      success: res => {
        document.title = res.Theme;
        this.wxShare(res, this.shareUrl);
      }
    });
  },
  methods: {
    navigateToGrid(data) {
      if (data.IsSignUp) {
        window.location.href = '#/entry/' + this.ST;
      } else if (data.Link) {
        window.location.href = data.Link;
      } else if (data.ID) {
        window.location.href =
          'https://es.11cm.com.cn/ActivitieHomePage/Content?id=' +
          data.ID +
          '&st=' +
          this.ST;
      }
    },
    navigateToPage(id) {
      window.location.href = '#/article/' + id + '?st=' + this.ST;
    }
  }
};
</script>

<style>
@import "../assets/css/simple-line-icons.min.css";
@import "../assets/css/MinHome.css";
</style>
